import './userList.css'
import React from 'react'
import { DataGrid } from '@material-ui/data-grid';
import {DeleteOutline} from '@material-ui/icons';
import {userRows} from "../../dummyDate"
import {Link} from "react-router-dom"
import { useState } from 'react';

export default function UserList() {

    const [data,setData] = useState(userRows);

    const handleDelete = (id)=>{
        setData(data.filter(item=>item.id !==id));
    };

    const columns = [
        { field: 'id', headerName: 'ID', width: 90 },
        { field: 'username', headerName: 'Username', width: 200,renderCell: (params)=>{
            return(
                <div className='userListUser'>
                    <img src={params.row.avator} alt="" className='userListImg' />
                    {params.row.username}
                </div>
            )
        }},
        { field: 'email', headerName: 'Email', width: 200 },
        {
          field: 'status',
          headerName: 'Status',
          width: 120,
        },
        {
          field: 'transactions',
          headerName: 'Transactions Volume',
          width: 160,
        },
        {
            field: 'action',
            headerName: 'Action',
            width: 150,
            renderCell:(params)=>{
                return(
                   <>
                        <Link to={"/user/"+params.row.id} >
                        <button className='userListEdit'>Edit</button>
                        </Link>
                        <DeleteOutline className="userListDelete"
                        onClick={()=>handleDelete(params.row.id)}
                         />
                   </>
                )
            }
          },
      ];
      
     


    return (
        <div className='UserList' >
          <DataGrid
                rows={data}
                columns={columns}
                disableSelectionOnClick
                pageSize={8}
                checkboxSelection
            />
        </div>
    )
}
